<template>
  <div class="home">
    <ul class="wrap banner">
      <li><img src="../assets/img/banner.4c6b6225.png" alt="" /></li>
    </ul>
    <div class="content">
      <Title title1="精品推荐" :imgSrc="titImg1"></Title>
      <List :data="imgs"></List>
      <Title title1="热门兑换" :imgSrc="titImg2"></Title>
      <div class="wrap"><img src="@/assets/img/banner.4c6b6225.png" alt="" /></div>
      <List :data="remenArr"></List>
    </div>
    <!-- 积分攻略 -->

    <Title title1="积分攻略" :imgSrc="titImg3"></Title>
    <ul class="imgs wrap">
      <li>
        <img src="../assets/img/integral-01.9386d4bf.png" alt="" />
        <h2>获得积分</h2>
        <button>去获取</button>
      </li>
      <li>
        <img src="../assets/img/integral-02.150d92a1.png" alt="" />
        <h2>获得积分</h2>
        <button>去获取</button>
      </li>
      <li>
        <img src="../assets/img/integral-03.9870f3f1.png" alt="" />
        <h2>获得积分</h2>
        <button>去获取</button>
      </li>
      <li>
        <img src="../assets/img/integral-04.afadcbdf.png" alt="" />
        <h2>获得积分</h2>
        <button>去获取</button>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src

import Title from '@/components/Home/Title.vue'
import List from '@/components/Home/List.vue'
import { first, second } from '@/request/api'
export default {
  name: 'HomeView',
  data() {
    return {
      titImg1: require('../assets/img/jingpin.png'), //精品
      titImg2: require('../assets/img/hot.png'), //最热
      titImg3: require('../assets/img/score.png'), //积分
      f1: require('../assets/img/integral-01.9386d4bf.png'),
      f2: require('../assets/img/integral-02.150d92a1.png'),
      f3: require('../assets/img/integral-03.9870f3f1.png'),
      f4: require('../assets/img/integral-04.afadcbdf.png'),
      jingpinArr: [],
      remenArr: [], //热门
      imgs: [] //存储精品
    }
  },
  async created() {
    let res = await first()
    console.log(res)
    this.imgs = res.data.data.data.records
    let second1 = await second()
    this.remenArr = second1.data.data.data.records
    console.log(this.remenArr)
    /*     this.remenArr =second */
    /*     console.log(res)
    console.log(imgs) */

    /*   first().then((res)=>{
        console.log(res)
      })
      second().then((res)=>{
        console.log(res)
      }) */
  },
  components: {
    Title,
    List
  }
}
</script>
<style lang="less">
.banner img {
  width: 1200px;
  height: 300px;
  margin-top: 60px;
}
.imgs {
  height: 260px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  li {
    position: relative;
    overflow: hidden;
    img {
      transition: 1s;
      position: relative;
    }
    &:hover img {
      transform: scale(1.1);
    }
    h2 {
      width: 149px;
      height: 29px;
      font-size: 30px;
      font-family: SourceHanSansSC;
      font-weight: bold;
      color: #ffffff;
      line-height: 23px;
      position: absolute;
      left: 20px;
      top: 40px;
    }
    button {
      width: 96px;
      height: 27px;
      border: 1px solid #ffffff;
      position: absolute;
      left: 31px;
      top: 96px;
    }
  }
}
</style>
